<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue cdn -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- sweet-alert -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        .style_color {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-for="(item,index) in datas">{{item}},{{index}}</div>
        <form action="/test" method="GET" @submit.prevent="doLogin" @keyup.enter="doLogin">
            {{values}}<input type="text" v-model="values">
            <button type="submit">提交</button>
        </form>
        <button @click="sweetAlert" type="submit">sweet</button>
        <button @click="set_time_out" type="submit">test</button>
        <test1></test1>
        <test2></test2>
        <ul>
            <li><a href="javascript: test();">123
                <h1>hello</h1>
                <ul class="aa">
                    <li>javascript</li>
                    <li>java</li>
                    <li>python</li>
                    <li>javascript</li>
                </ul>
            </a></li>
            <li><a href="javascript: test();">123
                <h1>hello</h1>
                <ul class="aa">
                    <li>javascript</li>
                    <li>java</li>
                    <li>python</li>
                    <li>javascript</li>
                </ul>
            </a></li>
            <li><a href="javascript: test();">123
                <h1>hello</h1>
                <ul class="aa">
                    <li>javascript</li>
                    <li>java</li>
                    <li>python</li>
                    <li>javascript</li>
                </ul>
            </a></li>
        </ul>
    </div>
    <script>
        $(function(){
            $("a").click(function(){
                alert($(this).html());
                $(this).parents("li").addClass("style_color");
            })
        })
        let bus = new Vue();
        // 注册组件
        // 组件1
        let test1 = {
            template: "<h1 @click='f1'>{{message}}</h1>",
            data() {
                return {
                    message: "hello"
                }
            },
            methods: {
                f1() {
                    let that = this;
                    bus.$emit("change",that.message);
                }
            }
        }
        // 组件2
        let test2 = {
            template: "<h1>{{message}}</h1>",
            data() {
                return {
                    message: "world"
                }
            },
            created() {
                console.log("实例以创建")
                let that = this;
                bus.$on("change",target => {
                    that.message = target;
                })
            },
        }
        Vue.component("test1",test1);
        Vue.component("test2",test2);
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    datas: ["a","b","c"],
                    values: "" 
                }
            },
            methods: {
                doLogin() {
                    alert(this.values);
                    return false;
                },
                sweetAlert(){
                    swal({
                        title: "Good job!",
                        text: "You clicked the button!",
                        icon: "error",
                        button: "Aww yiss!",
                    }).then(value => {
                        console.log(value,"111111111111");
                    })
                },
                set_time_out() {
                    setTimeout(this.sweetAlert(),2000);
                }
            }
        });
    </script>
</body>
</html>